﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-sm-12">
            <p>
                Quick View is is a template built using <a href="http://codyhouse.co/gem/css-product-quick-view/">Product Quick View</a> plugin. This is a plugin that does animations to view info entities in a fancy way. Take a look at their <a href="http://codyhouse.co/demo/product-quick-view/index.html">Online Demo</a> to see it in action.
       <br/><br/>
                Using this template, you will be able to view your items in a similar way by only changing the settings that come with this template and hit Apply!
                 </p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Featured screenshots</h3>
        </div>
        <div class="col-sm-8">
            <img src="../lists/Templates/beta/quickview/content/imgs/featured1.png" class="img-thumbnail" alt="featured screenshot" title="featured screenshot" />
            <p>&nbsp;</p>
            <img src="../lists/Templates/beta/quickview/content/imgs/featured2.png" class="img-thumbnail" alt="featured screenshot" title="featured screenshot" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Supported browsers</h3>
        </div>
        <div class="col-sm-10">
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="badge">v9+</span>
                    Internet Explorer
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Firefox
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Google Chrome
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Safari
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Opera
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Required List columns</h3>
            <p>This template can be applied on list views that have the following columns:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-2'>Template Field</th>
                        <th class='col-sm-4'>Type</th>
                        <th class='col-sm-3'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fldTitle</td>
                        <td>Single line of text</td>
                        <td>Title</td>
                    </tr>
                    <tr>
                        <td>fldImage</td>
                        <td>Hyperlink or Picture (Picture)</td>
                        <td>Image</td>
                    </tr>
                    <tr>
                        <td>fldLink</td>
                        <td>Hyperlink or Picture (Hyperlink)</td>
                        <td>Slide on click link</td>
                    </tr>
                    <tr>
                        <td>fldDescription</td>
                        <td>Multiple lines (Enhanced rich text)</td>
                        <td>Description</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p><h5>If you have different column names you can change them from the <b>Apply</b> tab and change field mappings from the <b>Fields Mapping section</b>.</h5></p>
            </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Settings</h3>
            <p>This template has the following settings to play with. Below are the available settings with all options and their default values:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-3'>Setting</th>
                        <th class='col-sm-3'>Default</th>
                        <th class='col-sm-6'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fillWidth</td>
                        <td>100%</td>
                        <td>Main area width size</td>
                    </tr>
                    <tr>
                        <td>boxMinHeight</td>
                        <td>100px</td>
                        <td>Boxs min height</td>
                    </tr>
                    <tr>
                        <td>thumbRenditionID</td>
                        <td>0</td>
                        <td>SP rendition ID of thumbnail image (0 normal image dimensions). <b> For aligment purposes, you should create new rendition to make all images have the same size</b></td>
                    </tr>
                    <tr>
                        <td>popupRenditionID</td>
                        <td>0</td>
                        <td>SP rendition ID of popup image (0 normal image dimensions). <b>For aligment purposes, you should create new rendition to make all images have the same size</b></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
 
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Credit</h3>
            <p>The following libraries were used to help creating this template:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                
                <tbody>
                    <tr>
                        <td><a href="http://codyhouse.co/gem/css-product-quick-view/" target="_blank">Product Quick View</a></td>
                      
                    </tr>
                    <tr>
                        <td><a href="http://julian.com/research/velocity/" target="_blank">Velocity.js</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>